<template>
	<view>
		<view class="user-info-panel">
			<view class="location-info">当前位置：{{address}}</view>
			<view class="user-info">
				<image style="width: 84upx; height: 84upx;" mode="aspectFill" :src="image"></image>
				<view class="user-name">
					<view><text class="name">安妮</text><text class="unit">稽查大队一支队</text></view>
					<view><text class="no">NO.执A025123</text></view>
				</view>
				<view class="sign-img"></view>
			</view>
		</view>
		<view class="operation-panel-bg">
			<view class="operation-panel">
				<swiper class="swiper" :indicator-dots="true" :autoplay="false">
					<swiper-item class="menu-panel">
						<view class="menu-item">
							<view><image style="width: 93upx; height: 93upx;" mode="aspectFill" :src="icon1"/></view>
							<view class="menu-label"><text>服务质量</text><text>检查上报</text></view>
						</view>
						<view class="menu-item">
							<view><image style="width: 93upx; height: 93upx;" mode="aspectFill" :src="icon2"/></view>
							<view class="menu-label"><text>检查记录</text><text>列表</text></view>
						</view>
						<view class="menu-item">
							<view><image style="width: 93upx; height: 93upx;" mode="aspectFill" :src="icon3"/></view>
							<view class="menu-label"><text>涉路施工</text><text>检查项目</text></view>
						</view>
						<view class="menu-item">
							<view><image style="width: 93upx; height: 93upx;" mode="aspectFill" :src="icon4"/></view>
							<view class="menu-label"><text>服务质量</text><text>检查列表</text></view>
						</view>
						<view class="menu-item">
							<view style="height: 93upx;padding-top: 15upx;box-sizing: border-box;text-align:center;"><image style="width: 72upx; height: 64upx;" mode="aspectFill" :src="icon5"/></view>
							<view class="menu-label"><text>日志上报</text></view>
						</view>
						<view class="menu-item">
							<view style="height: 93upx;padding-top: 15upx;box-sizing: border-box;text-align:center;"><image style="width: 72upx; height: 64upx;" mode="aspectFill" :src="icon6"/></view>
							<view class="menu-label"><text>日志待办</text></view>
						</view>
						<view class="menu-item">
							<view style="height: 93upx;padding-top: 15upx;box-sizing: border-box;text-align:center;"><image style="width: 72upx; height: 64upx;" mode="aspectFill" :src="icon7"/></view>
							<view class="menu-label"><text>日志待审</text></view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<view class="banner-panel"/>
		<view class="case-tabs-panel">
			<Tabs :tabData="tabs" @tabClick='tabClick'/>
		</view>
		<view class="case-panel">
			<view v-for="i in 3" class="case-item" :key="i">
				<view class="case-title">
					<text class="block"></text>
					<text class="title-label">编号-51267811000055</text>
					<view><text class="case-status status-1" :class="'status-'+i">已立案</text><uni-icons :size="16" color="#bbb" type="arrowright" /></view>
				</view>
				<view class="case-content"><text>如何整治城市建设进入快车道，占道经营、违建违停等城市管理问题？</text></view>
				<view class="bottom">
					<uni-icons :size="16" color="#bbb" type="email" class="icon"/>
					<text class="time">2020-04-12 15:30</text>
				</view>
			</view>
		</view>
		<uni-popup ref="warehouseSelect" type="bottom">
			<view class="table">
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in warehouseList" :key="item.id" >
							<view class="td" style="flex: 1;">
								<radio :checked="currentWarehouseId === item.id" />
							</view>
							<view class="td" style="flex: 15; text-align: center;">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<cmd-update :app="app" />
	</view>
</template>

<script>
	import cmdUpdate from '@/components/cmd-update/cmd-update.vue';
	import Tabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	
	import config from './config.js';
	import image from '../../static/index/user.png'
	import icon1 from '../../static/index/icon1.png'
	import icon2 from '../../static/index/icon2.png'
	import icon3 from '../../static/index/icon3.png'
	import icon4 from '../../static/index/icon4.png'
	import icon5 from '../../static/index/icon5.png'
	import icon6 from '../../static/index/icon6.png'
	import icon7 from '../../static/index/icon7.png'
	
	export default {
		components: {
			cmdUpdate, Tabs
		},
		data() {
			return {
				src: '',
				image,icon1,icon2,icon3,icon4,icon5,icon6,icon7,
				tabs: ['待办案件', '公告通知', '规章制度'],
				address: '四川省成都市天府广场',
				list: config,
				currentWarehouseId: null,
				warehouseList: [],
				app: null
			}
		},
		onShow() {
		},
		onLoad() {
			// this.update();
			this.$nextTick(()=>{
			})
		},
		methods: {
			tabClick(){
				
			},
			imageError(error){
				console.log(error)
				return errorImg
			},
			update() {
				this.$update.updateApp().then(downloadPath => {
					this.app = {
						downloadPath
					}
				});
			},
			handleClick(url) {
				url && uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.case-panel{
		padding: 0 15upx 20upx 15upx;
		.case-item{
			background-color: #fff;
			box-sizing: border-box;
			padding: 0upx 10upx 0upx 35upx;
			.case-title{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				width: 100%;
				padding: 5upx 0;
				margin-left: -25upx;
				.block{
					width: 14upx;
					height: 14upx;
					background-color: #4D70CB;
					margin-right: 10upx;
				}
				.title-label{
					flex:1;
					font-weight: 500;
					color: #323232;
					font-size: 30upx;
				}
				.case-status{
					color: #fff;font-size: 24upx;
					padding: 0upx 10upx;border-radius: 4upx;
					&.status-1{background-color: #429fff;}
					&.status-2{background-color: #fca471;}
					&.status-3{background-color: #9c94ff;}
				}
			}
			.bottom{
				display: flex;align-items: center;
				border-bottom: 2upx solid #E7E7E7;
				// padding-left: 35upx;
				.icon{margin-right: 10upx;}
				.time{color:#bbb;font-size: 24upx;}
			}
			.case-content{
				// padding-left: 35upx;padding-right: 10upx;
				color: #686868;font-size: 28upx;line-height: 38upx;height: 76upx;overflow: hidden;
			}
		}
	}
	.case-tabs-panel{
		margin-top: 15upx;
		padding: 0 15upx;
	}
	.banner-panel{
		box-sizing: border-box;
		padding: 15upx 20upx;
		background: url(../../static/index/banner.png) no-repeat center center;
		background-size: calc(100% - 30upx) 100%;
		height: 156upx;
	}
	.operation-panel-bg{
		background-color: #E7F2FF;
		padding: 15upx 20upx;
		.swiper{
			height: 370upx;
		}
		.operation-panel{
			width: 100%;
			background-color: #fff;
			height: 370upx;
			font-size: 26upx;
			font-weight: 500;
		}
		.menu-panel{
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			text-align: center;
			padding: 20upx 35upx;
			height: 370upx;
		}
		.menu-item{
			flex: 0 0 25%;
			height: 170upx;
			margin-bottom: 10upx;
			justify-content: center;
			.menu-label{
				display: flex;
				flex-direction: column;
				color: #323232;
				height: 60upx;
				line-height: 30upx;
				font-size: 26upx;
				font-weight: 500;
				text-align: center;
			}
		}
	}
	.user-info-panel{
		height: 270upx;
		box-sizing: border-box;
		background: url(../../static/index/header_bg.png) no-repeat;
		background-size: 100% 99%;
		padding: 10upx 20upx 0upx 20upx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		.user-info{
			height: 108upx;
			background: url(../../static/index/info_bg.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			padding: 0upx 15upx;
			.user-name{
				flex: 1;
				padding-left: 15upx;
				.name{color: #4D4D4D;font-size: 30upx;margin-right: 10upx;}
				.unit{color: #7E7E7E;font-size: 26upx;}
				.no{
					color: #fff;font-size: 22upx;
					background: linear-gradient(93deg, #8FCAF7, #758DF5);
					border-radius: 0px 15px 15px 0px;
					padding: 0px 10upx;
				}
			}
			.sign-img{
				height: 108upx;
				width: 80upx;
				background: url(../../static/index/sign.png) no-repeat top left;
				background-size: 63upx 63upx;
			}
		}
		.location-info{
			height: 30upx;
			line-height: 30upx;
			margin-bottom: 10upx;
			background: url(../../static/index/location.png) no-repeat left center;
			background-size: 21upx 27upx;
			padding-left: 30upx;
			color: #fff;
		}
	}

</style>
